<template>
  <div>
    <card v-for="item in items" :key="item.id" :position="item.position" @mouseover="item.stopped = true"
          @mouseleave="item.stopped = false" :item="item" :removeItem="(e)=>{
      items = items.filter(itemIn => itemIn !== e);
    }">

    </card>

  </div>
</template>

<script>
import Card from './Card.vue'
import NoteCard from './NoteCard.vue'
import * as note from '@/api/note/note'
import Vue from 'vue'
import {Base64} from 'js-base64'

export default {
  components: {
    Card, NoteCard
  },
  data() {
    return {
      cards: [],
      items: []
    }
  },
  created() {
    for (let i = 0; i < 10; i++) {
      this.cards.push({
        id: i,
        position: {
          x: Math.random() * window.innerWidth,
          y: Math.random() * window.innerHeight
        },
        direction: {
          x: Math.random() * 2 - 1,
          y: Math.random() * 2 - 1
        },
        stopped: false
      })
    }
  },
  mounted() {
    setInterval(() => {


      if (this.items.length <= 10)
        note.randomOne().then(e => {
          const data = e.data
          Vue.set(data, "position", {
            x: Math.random() * 2 - 1,
            y: Math.random() * 2 - 1
          });
          Vue.set(data, "direction", {
            x: Math.random() * 2 - 1,
            y: Math.random() * 2 - 1
          });
          Vue.set(data, "stopped", false);
          if (data.content) {
            data.content = Base64.decode(data.content)
          }
          let chongFu = false;
          //判断是否有重复
          this.items.forEach(item => {
            if (item.id === data.id) {
              chongFu = true
            }
          })
          if (!chongFu) {
            this.items.push(data)
          }

        })
    }, 3000);

    setInterval(() => {
      this.cards.forEach(card => {
        if (!card.stopped) {
          card.position.x += card.direction.x
          card.position.y += card.direction.y

          // Check for collisions with edge of screen
          if (card.position.x < 0 || card.position.x > window.innerWidth) {
            card.direction.x *= -1
          }
          if (card.position.y < 0 || card.position.y > window.innerHeight) {
            card.direction.y *= -1
          }

          // Check for collisions with other cards
          this.cards.forEach(otherCard => {
            if (card.id !== otherCard.id) {
              const dx = card.position.x - otherCard.position.x
              const dy = card.position.y - otherCard.position.y
              const distance = Math.sqrt(dx * dx + dy * dy)
              if (distance < 50) {
                card.direction.x *= -1
                card.direction.y *= -1
              }
            }
          })
        }
      })
    }, 10)
  }
}
</script>


<!--第二种是侧边栏-->
<!--<template>-->
<!--  <div>-->
<!--    <div class="toolbar">-->
<!--      <i class="icon"></i>-->
<!--      <div class="menu">-->
<!--        &lt;!&ndash; menu items go here &ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="toolbar">-->
<!--      <i class="icon" @click="toggleMenu"></i>-->
<!--      <div class="menu" :class="{ 'menu-open': menuOpen }">-->
<!--        &lt;!&ndash; menu items go here &ndash;&gt;-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      menuOpen: false-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    toggleMenu() {-->
<!--      this.menuOpen = !this.menuOpen-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style>-->
<!--.toolbar {-->
<!--  position: fixed;-->
<!--  top: 50%;-->
<!--  transform: translateY(-50%);-->
<!--  right: 0;-->
<!--  width: 50px;-->
<!--  height: 50px;-->
<!--  background-color: #333;-->
<!--  border-radius: 50%;-->
<!--  z-index: 999;-->
<!--}-->

<!--.icon {-->
<!--  position: absolute;-->
<!--  top: 50%;-->
<!--  left: 50%;-->
<!--  transform: translate(-50%, -50%);-->
<!--  width: 30px;-->
<!--  height: 30px;-->
<!--  background-image: url('https://s1.aigei.com/src/img/png/e0/e0a07cd80e09495ea59e715ad48eee7a.png?imageMogr2/auto-orient/thumbnail/!240x240r/gravity/Center/crop/240x240/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:wd_zsEt1SlJteq-Cg8QEGGppcXs=');-->
<!--  background-size: cover;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.menu {-->
<!--  position: absolute;-->
<!--  top: 50%;-->
<!--  right: 100%;-->
<!--  transform: translateY(-50%);-->
<!--  width: 200px;-->
<!--  height: 300px;-->
<!--  background-color: #333;-->
<!--  border-radius: 10px;-->
<!--  display: none;-->
<!--  z-index: 998;-->
<!--}-->

<!--.menu-open {-->
<!--  display: block;-->
<!--}-->
<!--</style>-->
